<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{room}} 座位号：{{ pc_id }}</title>
    <link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
    <script src="{{url_for('static', filename='js/jquery-3.6.0.min.js')}}"></script>
    <script src="{{url_for('static', filename='js/mqttws31.js')}}" type="text/javascript"></script>    
</head>
<body>
    <div class="container">
        <div class="row justify-content-center align-items-center mt-5">
        <div class="col-md-6">
            <div class="border border-primary rounded-3 p-3 bg-light">
                <h1 class="text-center mb-3 my-3">座位号：{{ pc_id }}</h1>
                <div id="connected_mqtt" class="alert alert-success text-center" role="alert"></div>

                <form>
                    <div class="mb-3">
                        <label for="message" class="form-label">问题:</label>
                        <textarea type="text" class="form-control" name="message" id="message" rows="3" placeholder="请输入问题"></textarea>
                    </div>
                    <div class="text-center">
                        <input type="button" class="btn btn-primary" style="width: 40%;" value="发送" onclick="send_message()">
                    </div>
                </form>
                <hr class="border border-primary border-2 opacity-50">
                <h5>收到的回复：</h5>
                <div>
                    <ol id="reply_answers" class="list-group mt-3"></ol>
                </div>
            </div>
        </div>
        </div>
    </div>

    <script>
        room = "{{ room }}"
        computer_id = "{{ pc_id }}";
        // MQTT broker 配置
        var MQTT_BROKER = "{{ mqtt_account['MQTT_BROKER'] }}";
        var MQTT_PORT = Number("{{ mqtt_account['MQTT_PORT'] }}");

        // MQTT client
        var mqtt_client = new Paho.MQTT.Client(MQTT_BROKER, MQTT_PORT, "index_" + Math.random().toString(16).substr(2, 8));

        // 连接 MQTT broker
        mqtt_client.connect({
            onSuccess: function() {
                console.log("Connected to MQTT broker");
                document.getElementById("connected_mqtt").innerHTML= "成功连接！";
                // 订阅回复的主题，样式："replies_room1/1"
                mqtt_client.subscribe("replies_" + room + "/" + computer_id, {
                    onSuccess: function() {
                        console.log("Subscribed to incoming messages");
                    },
                    onFailure: function() {
                        console.log("Failed to subscribe to incoming messages");
                    }
                });
            },
            onFailure: function() {
                console.log("Failed to connect to MQTT broker");
                document.getElementById("connected_mqtt").innerHTML= "连接失败！";
            }
        });

        // 处理接收到 的 MQTT 回复消息
        mqtt_client.onMessageArrived = function(message) {
            console.log("Message received on topic " + message.destinationName + " with payload " + message.payloadString);

            // Parse computer ID from topic
            //var computer_id = message.destinationName.split("/")[1];

            // 显示在页面上
            var messagesDiv = document.getElementById("reply_answers");
            //messagesDiv.innerHTML += "<p>回复：" + message.payloadString + "</p>";
            messagesDiv.innerHTML += '<li class="list-group-item">' + message.payloadString + "</li>";
        };

        // 发送消息，主题样式："messages_room1/1"
        function send_message() {
            console.log("send_message")
            // Get computer ID and message
            // var computer_id = document.getElementById("computer_id").value;
            var message = document.getElementById("message").value;

            // 发送消息 to MQTT broker
            mqtt_client.send("messages_" + room + "/" + computer_id, "座位号" + computer_id + ": " + message);
            //mqtt_client.send("messages_room1/1", message);

            // Clear message input
            document.getElementById("message").value = "";
        }
    </script>
</body>
</html>
